<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>用户信息管理系统</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <script src="js/jquery-2.1.0.min.js"></script>
    <style type="text/css">
        html, body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: auto;
        }

        body {
            background: url(images/8.jpg) no-repeat 100% 100%;
            background-size: cover;
        }
        td, th {
            text-align: center;
        }
    </style>
</head>
<body>
<div class="container">
    <h3 style="text-align: center;margin-bottom: 50px; color: #985f0d">用户信息列表</h3>
    <div style="float: left;">
        <form class="form-inline">
            <div class="form-group">
                <label for="ipt_name" style="color: #e2e2e2">姓名</label>
                <input name="name" type="text" class="form-control" id="ipt_name">
            </div>
            <div class="form-group">
                <label for="ipt_address" style="color: #e2e2e2">籍贯</label>
                <input name="address" type="text" class="form-control" id="ipt_address">
            </div>
            <div class="form-group">
                <label for="ipt_email" style="color: #e2e2e2">邮箱</label>
                <input name="email" type="email" class="form-control" id="ipt_email">
            </div>
            <button id="submit1" type="button" class="btn btn-default" onclick="oncli()">查询</button>
        </form>
    </div>
    <div style="float: right;margin-bottom: 15px">
        <a class="btn btn-primary" href="add.html">添加用户</a>
        <a id="delete" class="btn btn-primary" href="javascript:delSel()">删除选中</a>
    </div>
    <table border="1" class="table table-bordered table-hover">
        <tr class="success">
            <th>选择</th>
            <th>编号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
            <th>籍贯</th>
            <th>QQ</th>
            <th>邮箱</th>
            <th>超管</th>
            <th>操作</th>
        </tr>
        <tbody id="info">
        <!--        <tr>-->
        <!--            <th>-->
        <!--                <input id="1" type="checkbox">-->
        <!--            </th>-->
        <!--            <th>1</th>-->
        <!--            <th>张三</th>-->
        <!--            <th>男</th>-->
        <!--            <th>18</th>-->
        <!--            <th>北京</th>-->
        <!--            <th>295628068</th>-->
        <!--            <th>295628068@qq.com</th>-->
        <!--            <th>是</th>-->
        <!--            <th>-->
        <!--                <a class="btn btn-default btn-sm" href="update.hytml?id=">修改</a>-->
        <!--                <a class="btn btn-default btn-sm" href="javascript:void(0);">删除</a>-->
        <!--            </th>-->
        <!--        </tr>-->
        <!--        <tr>-->
        <!--            <th>-->
        <!--                <input id="2" type="checkbox">-->
        <!--            </th>-->
        <!--            <th>2</th>-->
        <!--            <th>李四</th>-->
        <!--            <th>男</th>-->
        <!--            <th>18</th>-->
        <!--            <th>西安</th>-->
        <!--            <th>295628068</th>-->
        <!--            <th>295628068@qq.com</th>-->
        <!--            <th>否</th>-->
        <!--            <th>-->
        <!--                <a class="btn btn-default btn-sm" href="update.hytml?id=">修改</a>-->
        <!--                <a class="btn btn-default btn-sm" href="javascript:void(0);">删除</a>-->
        <!--            </th>-->
        <!--        </tr>-->
        </tbody>
    </table>
    <div>
        <nav aria-label="Page navigation">
            <ul id="all" class="pagination">
                <!--                <li><a href="javascript:void(0);">1</a></li>-->
                <!--                <li><a href="javascript:void(0);">2</a></li>-->
                <!--                <li class="active"><a href="javascript:void(0);">3</a></li>-->
                <!--                <li><a href="javascript:void(0);" aria-label="Next">-->
                <!--                    <span aria-hidden="true">&raquo;</span></a>-->
                <!--                </li>-->
                <!--                <span style="font-size: 20px;margin-left: 10px;"> 共 10 条记录，共 1 页-->
                <!--                                  </span>-->
            </ul>
        </nav>
    </div>
</div>
</body>
<script>
    // 查询的参数变量定义
    var name = "";
    var address = "";
    var email = "";
    var cpage = 1; // 当前页面
    var psize = 8; // 每页显示条数

    // 点击查询按钮
    function oncli() {
        name = jQuery("#ipt_name").val().trim();
        address = jQuery("#ipt_address").val().trim();
        email = jQuery("#ipt_email").val().trim();
        // 查询后端接口展示信息
        getData();
    }

    // 点击分页按钮
    function cliPage(cp) {
        cpage = cp;
        // 查询后端接口展示信息
        getData();
    }

    // 查询后端接口展示信息
    function getData() {
        jQuery.getJSON("/user/list", {
            "name": name,
                "address": address,
                "email": email,
                "cpage": cpage,
                "psize": psize
            }, function (result) {
                if (result != null &&result.data!=null && result.data.list != null &&
                    result.data.list.length > 0) { // 数据是合理
                    // 1.绑定列表数据
                    var listHtml = "";
                    for (var i = 0; i < result.data.list.length; i++) {
                        var userinfo = result.data.list[i];
                        listHtml += '<tr>\n' +
                            '            <th>\n' +
                            '                <input id="' + userinfo.id + '" type="checkbox">\n' +
                            '            </th>\n' +
                            '            <th>' + userinfo.id + '</th>\n' +
                            '            <th>' + userinfo.name + '</th>\n' +
                            '            <th>' + userinfo.sex + '</th>\n' +
                            '            <th>' + userinfo.age + '</th>\n' +
                            '            <th>' + userinfo.address + '</th>\n' +
                            '            <th>' + userinfo.qq + '</th>\n' +
                            '            <th>' + userinfo.email + '</th>\n' +
                            '            <th>' + (userinfo.isadmin == 0 ? "否" : "是") + '</th>\n' +
                            '            <th>\n' +
                            '                <a class="btn btn-default btn-sm" href="update.html?uid=' +
                            userinfo.id + '">修改</a>\n' +
                            '                <a class="btn btn-default btn-sm" href="javascript:del(' +
                            userinfo.id + ');">删除</a>\n' +
                            '            </th>\n' +
                            '        </tr>';
                    }
                    jQuery("#info").html(listHtml);
                    // 2.绑定分页信息
                    var tpage = result.data.tpage; // 总页数
                    var pageHtml = "";
                    if (tpage > 1) {
                        for (var j = 1; j <= tpage; j++) {
                            if (cpage == j) {
                                // 拼接当前页
                                pageHtml += '<li class="active"><a href="javascript:cliPage(' +
                                    j + ');">' + j + '</a></li>\n';
                            } else {
                                pageHtml += '<li><a href="javascript:cliPage(' +
                                    j + ');">' + j + '</a></li>\n';
                            }
                        }
                        pageHtml += '<li><a href="javascript:cliPage(' + (cpage + 1) +
                            ');" aria-label="Next">\n' +
                            '                    <span aria-hidden="true">&raquo;</span></a>\n' +
                            '                </li>\n' +
                            '                <span style="font-size: 20px;margin-left: 10px;"> 共 ' +
                            result.data.tcount + ' 条记录，共 ' + tpage + ' 页\n' +
                            '                                  </span>';
                    }
                    jQuery("#all").html(pageHtml);
                }
            }
        );
    }

    getData();

    // 单条删除
    function del(id) {
        if (confirm("是否进行删除？")) {
            jQuery.getJSON("/user/del", {"id": id}, function (result) {
                if (result != null && result.data > 0) {
                    alert("恭喜：删除成功！");
                    // 刷新当前页面
                    location.href = location.href;
                } else {
                    alert("抱歉：删除失败，请重试！");
                }
            });
        }
    }

    //删除多条信息
    function delSel() {
        if (confirm("是否进行删除？")) {
            //1.获取需要删除的用户的id
            var ids = ""; //待删除id集合
            jQuery("#info").find("tr").each(function (i) {
                //jQuery(this)拿到当前行 tr
                if (jQuery(this).find("th:first").find("input").prop("checked") == true) {
                    ids += jQuery(this).find("th:first").find("input").attr("id") + ",";
                }
            });
            if (ids !="") {
                //2.传递给后端接口处理
                jQuery.getJSON("user/dels", {"ids":ids},function (result) {
                    if (result != null &&result.status==0 && result.data > 0) {
                        alert("恭喜：删除成功！");
                        // 刷新当前页面
                        location.href = location.href;
                    } else {
                        alert("抱歉：删除失败，请重试！");
                    }
                })
            } else {
                alert("请先选择需要删除的信息！");
            }
        }
    }

</script>
</html>
